<!--
 * Copyright © 2022
 * @Author: zhangxiang
 * @Date: 2022-08-03 17:02:33
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-01-16 15:54:25
 * @Description:
 *
-->
<template>
  <el-dialog
    class="update-dialog"
    title="编辑云主机"
    :visible="show"
    width="40vw"
    top="10vh"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="closeClick"
  >
    <el-form
      ref="form"
      class="update-form"
      :rules="rules"
      :model="form"
      label-width="auto"
      size="medium"
    >
      <el-form-item label="主机名称" prop="vmName">
        <el-input
          v-model="form.vmName"
          :disabled="true"
          placeholder="请输入主机名称"
        />
      </el-form-item>
      <el-form-item label="云服务商" prop="vmNcloudProviderame">
        <el-input
          v-model="form.cloudProvider"
          :disabled="true"
          placeholder=""
        />
      </el-form-item>
      <el-form-item label="标签" prop="vmTags">
        <VmTags :vm-tags.sync="form.vmTags" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="cancelClick">取 消</el-button>
      <el-button
        type="primary"
        size="small"
        :loading="confirmLoading"
        @click="confirmClick"
      >确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { updateVM } from '@/api/cn-resource'
import VmTags from './VmTags.vue'

export default {
  name: 'UpdateDialog',
  components: {
    VmTags
  },
  props: {
    // 是否显示
    show: {
      type: Boolean,
      default: false
    },
    // 数据
    info: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    /**
     * @description: 校验vmTags
     * @param {*} rule
     * @param {*} value
     * @param {*} callback
     * @return {*}
     */
    var validateVmTags = (rule, value, callback) => {
      if (Array.isArray(this.form.vmTags) && this.form.vmTags.length > 0) {
        // 不为空
        const reg = /^([a-zA-Z\d-_\\\/\:\.\s])*$/ // 校验的正则
        let hasIllegal = false // 是否存在不合法
        for (const item of this.form.vmTags) {
          if (
            item.key === '' ||
            !reg.test(item.key) ||
            item.value === '' ||
            !reg.test(item.value) // 数据为空或不符合规则
          ) {
            // 存在不合法
            hasIllegal = true
            break
          }
        }
        if (hasIllegal) {
          callback(new Error('存在不合法的标签键值')) // 抛出异常
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      confirmLoading: false,
      form: {
        id: '',
        vmName: '',
        cloudProvider: '',
        vmTags: [] // 标签
      },
      rules: {
        vmTags: [{ validator: validateVmTags }]
      }
    }
  },
  computed: {},
  watch: {
    info: {
      handler(newVal) {
        if (newVal && newVal.id) {
          this.form.id = newVal.id
          this.form.vmName = newVal.vmName
          this.form.cloudProvider = newVal.cloudProvider
          this.form.vmTags = newVal.vmTags
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    /**
     * @description: 确定
     * @return {*}
     */
    confirmClick() {
      this.$refs.form.validate((valid, obj) => {
        if (valid) {
          this.confirmLoading = true
          updateVM({
            id: this.form.id,
            vmTags: this.form.vmTags
          })
            .then((res) => {
              this.$emit('success')
              this.closeClick()
            })
            .finally(() => {
              this.confirmLoading = false
            })
        }
      })
    },
    /**
     * @description: 关闭
     * @return {*}
     */
    closeClick() {
      this.$emit('update:show', false)
    },
    /**
     * @description: 取消
     * @return {*}
     */
    cancelClick() {
      this.closeClick()
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.update-dialog {
  /deep/ .el-dialog {
    min-width: 700px;
  }
}
</style>
